<template>
	<view>
		<u-toast ref="uToast"></u-toast>
		<u-navbar :placeholder="true" @leftClick="goBack" title="我的余额"></u-navbar>
		<view class="margin-tb-lg margin-lr-sm bg-white flex align-center justify-between padding-lg radius">
			<view>
				<view class="text-sm text-gray">
					总余额
				</view>
				<view class="text-xxl text-bold margin-top-xs">
					{{balance}}元
				</view>
			</view>
			<view class="cuIcon-moneybag text-lg"></view>
		</view>
		<view class="margin-lg flex flex-direction">
			<text class="text-red text-sm">1、充值后所有门店都可使用</text>
			<text class="text-red text-sm margin-top-xs">2、大额充值可致电相应门店，将会给予您最满意的优惠</text>
		</view>
		<view class="margin-lg ">
			<view class="text-black text-lg text-bold">选择充值金额</view>
			<view class="margin-top-sm  pay-box">
				<view v-for="(item,index ) in paylist" :key="index" :class="item.change?'bg-tea':'bg-white'"
					@click="changPrice(item,item.money*1+1*item.give)"
					class="radius  line-tea flex flex-direction justify-start padding-sm">
					<text :class="item.change?'text-white':'text-black'"
						class="text-bold text-price">{{item.money}}</text>
					<text v-show="item.give>0 " :class="item.change?'text-white':'text-gray'"
						class="text-sm margin-top-xs">实际到账:{{item.money*1+1*item.give}}</text>
				</view>
			</view>
		</view>
<!-- 		<view v-show="!isMember" @click="makeMember"
			class="margin-lg   padding-lg flex align-center justify-between radius  bg-white">
			<view class="flex align-center">
				<text class="cuIcon-vip text-tea" style="font-size: 30px;"></text>
				<text class="text-tea margin-left-xs">成为会员立享优惠</text>
			</view>
			<view>
				<text class="text-tea text-bold">去了解</text>
				<text class="cuIcon-right text-tea"></text>
			</view>
		</view> -->
		<view class="flex l align-start justify-center"
			style="position: fixed;width: 100%;height: 180upx;bottom: 0px;left: 0px;">
			<button class="cu-btn bg-tea lg" style="width: 80%;" :disabled="isDisabled"
				@click="confirmPay">确认充值</button>
		</view>
	</view>
</template>

<script>
	import {
		querypay,
		addrecord
	} from '@/request/api_user.js'
	export default {
		data() {
			return {
				paylist: [],
				balance: '',
				toprice: 0,
				isDisabled: false,
			}
		},
		created() {
			this.getPayList();
			//this.checkUserIsVip();
		},
		methods: {
			//成为会员
			makeMember() {
				uni.navigateTo({
					url: '/pages/user/member/introduce'
				})
			},
			changPrice(item, toprice) {
				this.toprice = toprice
				this.paylist.forEach((x) => {
					x.change = x == item;
				})
			},
			getPayList() {
				uni.showLoading();
				let vm = uni.getStorageSync('UserInfo');
				console.log(vm)
				this.balance = vm.balance
				querypay().then((req) => {
					req.data.data.forEach((i) => {
						console.log(i)
						this.paylist.push({
							"money": i.money,
							"give": i.give,
							"change": false,
						})
					})
				})
			},
			//确认充值
			confirmPay() {
				this.isDisabled = true
				let vm = uni.getStorageSync('UserInfo');
				if (this.toprice === 0) {
					this.isDisabled = false
					uni.showToast({
						icon: 'none',
						title: "你还没有选择充值选项"
					})
				} else {
					addrecord({
						"uid": vm.id,
						"price": this.toprice
					}).then((req) => {
						this.isDisabled = false
						if (req.data.code === 200) {
							vm.balance = req.data.data
							uni.setStorageSync('UserInfo', vm);
							this.balance = req.data.data
							uni.showToast({
								icon: 'none',
								title: "充值成功"
							})
						} else {
							uni.showToast({
								icon: 'error',
								title: req.data.msg
							})
						}
					})
				}
			},
			// turnUpWxPay(res) {
			// 	let that = this;
			// 	this.out_trade_no = res.data.out_trade_no; //支付订单
			// 	uni.requestPayment({
			// 		provider: 'wxpay', //支付类型-固定值
			// 		timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
			// 		nonceStr: res.data.nonceStr, // 随机字符串
			// 		package: res.data.package, // 固定值
			// 		signType: res.data.signType, //固定值
			// 		paySign: res.data.paySign, //签名
			// 		success: function(res) {
			// 			uni.showLoading({
			// 				title: '支付结果查询中',
			// 			})
			// 			that.changeOrderStatusTotal = 0;
			// 			that.timeIntervalId = setInterval(that.callBackPayResult, 3000);
			// 		},
			// 		fail: function(err) {
			// 			console.log(err);
			// 			let emsg = '支付失败';
			// 			if (e.errMsg.indexOf('fail cancel') != -1) {
			// 				emsg = '用户取消支付';
			// 			}
			// 			uni.showToast({
			// 				icon: 'none',
			// 				title: emsg
			// 			})
			// 		}
			// 	});
			// },
			//通知后端手动查询订单结果
			// callBackPayResult() {
			// 	this.changeOrderStatusTotal++;
			// 	if (this.changeOrderStatusTotal >= 10) {
			// 		clearInterval(this.timeIntervalId);
			// 		uni.hideLoading();
			// 		this.$refs.uToast.show({
			// 			message: '查询支付结果超时！',
			// 			type: 'error',
			// 			position: 'top'
			// 		});
			// 		return;
			// 	}
			// 	//params.storeId
			// 	uni.$u.http.post('/WxPayCallBack/ZhuDong', {
			// 		out_trade_no: this.out_trade_no
			// 	}).then(res => {
			// 		if (res.data == 1) {
			// 			clearInterval(this.timeIntervalId);
			// 			uni.hideLoading();
			// 			this.$refs.uToast.show({
			// 				message: '支付成功！',
			// 				type: 'success',
			// 				position: 'top'
			// 			});
			// 			this.checkUserIsVip();
			// 			// uni.navigateTo({
			// 			// 	url: '/pages/runindex?index=2',
			// 			// })
			// 			return;
			// 		}
			// 	})
			// },
			goBack() {
				uni.navigateBack();
			}

		}
	}
</script>

<style scope>
	.pay-box {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		column-gap: 20rpx;
		row-gap: 20rpx;

	}
</style>